<template>
  <div class="head">
    <div class="navbar">
      <div class="sidebar-logo-container">
        <router-link class="sidebar-logo-link" to="/">
          <img src="../../../public/logo.png" class="sidebar-logo" />
        </router-link>
      </div>
      <el-col style="margin: 0 110px 0 80px" :lg="12" :xl="13">
        <div style="display: flex; align-items: center; margin: 5px 0">
          <el-input type="text" v-model="input3" placeholder="请输入专利关键词" class="input-with-select"
            @keyup.enter.native="submit">
            <el-button slot="append" @click="submit" type="primary">检索</el-button>
            <i slot="prefix-icon" class="el-icon-search"></i>
          </el-input>
          <el-button type="primary" @click="AdvancedSearch" style="
              background-color: #3377ff;
              border-color: #8f9bb2;
              margin-left: 20px;
            ">高级搜索</el-button>
        </div>
      </el-col>

      <el-col :lg="8" :xl="5">
        <div class="avatar-box">
          <div v-if="type != '1'" style="display: flex; align-items: center">
            <img :src="avatar" class="user-avatar" />
            <span style="display: inline-block; padding-left: 20px" class="context ell">{{ name }}</span>
          </div>
          <el-button @click="goCenter" v-else
            style="background-color: #f05656; color: #fff; border: none">试用用户,快去认证吧</el-button>
          <el-tooltip v-if="is_admin_view == 0" class="item" effect="dark" content="个人中心" placement="bottom">
            <i class="iconfont icon-2-wodezhuanli" @click="center"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="修改密码" placement="bottom">
            <i class="iconfont el-pwd icon-password" @click="handleGoPwd"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="系统管理" placement="bottom">
            <i class="iconfont icon-xitongguanli" @click="system"
              style="margin: 0 22px; font-size: 20px; cursor: pointer"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="退出登录" placement="bottom">
            <i class="iconfont icon-guanji" @click="logout"></i>
          </el-tooltip>
          <el-button type="primary" v-if="is_admin_view == 1" @click="backAdmin" style="
              background-color: #3377ff;
              border-color: #8f9bb2;
              margin-left: 20px;
            ">返回管理端</el-button>
        </div>
      </el-col>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";

export default {
  data() {
    return {
      input3: "",
    };
  },
  computed: {
    ...mapGetters([
      "sidebar",
      "avatar",
      "name",
      "roles",
      "type",
      "is_admin_view",
      'is_admin'
    ]),
  },
  methods: {
    handleGoPwd() {
      this.$router.push("/upPwd");
    },
    system() {
      this.$router.push("/system");
    },
    goCenter() {
      this.$router.push("/userCenter");
    },
    toggleSideBar() {
      this.$store.dispatch("app/toggleSideBar");
    },
    async logout() {
      await this.$store.dispatch("user/resetToken");
      sessionStorage.setItem("show", "");
      localStorage.setItem("avatar", "");
      this.$router.push(`/web/guanjia`);
      location.reload();
      // this.$router.push(`/web/home?redirect=${this.$route.fullPath}`)
    },
    backAdmin() {
      const news = this.$router.resolve({ path: "/#/user" });
      window.location.href = news.location.path;
      setToken(sessionStorage.getItem("tokens"));
    },
    submit() {
      if (this.$route.path == "/docking") {
        this.$emit("searchVal", this.input3);
      } else {
        this.$router.push({ path: "/docking", query: { val: this.input3 } });
      }
      // if (this.$route.path == "/docking") {
      //   this.$emit("")
      //   this.$store.state.seach = this.input3
      // } else {
      //   this.$router.push({
      //     path: "/docking",
      //     query: {
      //       val: this.input3
      //     }
      //   })
      // }
    },
    AdvancedSearch() {
      if (this.$route.path == "/AdvancedSearch") {
        this.$store.state.seach = this.input3;
      } else {
        this.$router.push({
          path: "/AdvancedSearch",
          query: {
            val: this.input3,
          },
        });
      }
    },
    center() {
      console.log('个人中心')
      this.$router.push("/userCenter");
    },
  },
};
</script>

<style lang="scss" scoped>
.head {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
}

.sidebar-logo-container {
  width: 260px;
  height: 100px;
  line-height: 100px;
  text-align: center;

  img {
    // height:32px;
    transform: scale(1);
    display: inline-block;
    vertical-align: middle;
  }
}
.el-pwd {
  font-size: 20px;
  cursor: pointer;
  margin-left: 0 22px;
}
.navbar {
  height: 100px;
  display: flex;
  align-items: center;
  // justify-content: space-around;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }

  .breadcrumb-container {
    float: left;
  }

  .right-menu {
    float: right;
    height: 100%;
    line-height: 100px;

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }

    .avatar-container {
      margin-right: 22px;

      .avatar-wrapper {
        margin-top: 5px;
        position: relative;

        .user-avatar {
          cursor: pointer;
          width: 32px;
          height: 32px;
          border-radius: 10px;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }
  }
}

.user-avatar {
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(247, 249, 252, 1);
}

.avatar-box {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;

  // margin-left: 50px;
  p {
    // margin:0 20px;
  }
}

.icon-guanji,
.icon-2-wodezhuanli {
  font-size: 20px;
  cursor: pointer;
}

.icon-guanji:hover {
  color: #3377ff;
}

.icon-2-wodezhuanli:hover {
  color: #3377ff;
}

.icon-2-wodezhuanli {
  margin: 0 22px;
}
</style>
